<template>
  <el-popover v-model="visible" placement="left" width="400">
    <el-button size="mini" type="warning" plain slot="reference">重置密码</el-button>
    <h3 class="tc">重置密码</h3>
    <el-form
      class="mt-10"
      ref="passwordForm"
      :model="form"
      size="mini"
      label-width="80px"
      :rules="rules"
      label-position="left"
    >
      <el-form-item label="新 密 码" required prop="newPassword">
        <el-input type="password" v-model="form.newPassword"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" required prop="againPassword">
        <el-input type="password" v-model="form.againPassword"></el-input>
      </el-form-item>
      <el-divider></el-divider>
      <div class="tc">
        <el-button size="small" plain @click="visible=false">取消</el-button>
        <el-button
          size="small"
          type="primary"
          :loading="submiting"
          @click="onSubmit('passwordForm')"
        >保存</el-button>
      </div>
    </el-form>
  </el-popover>
</template>

<script>
import md5 from "js-md5";
import { resetPwd } from "api/seting/user";
export default {
  props: ["userId"],
  data() {
    var validNewPass = (rule, value, callback) => {
      let reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/;
      if (value === "") {
        callback(new Error("请输入新密码"));
      } else {
        if (!value.match(reg)) {
          callback(new Error("密码必须包含字母和数字,且在6~18位之间"));
        } else {
          if (this.form.againPassword !== "") {
            this.$refs.passwordForm.validateField("againPassword");
          }
          callback();
        }
      }
    };
    var validAgainPass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入新密码"));
      } else if (value !== this.form.newPassword) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      form: {
        newPassword: "",
        againPassword: ""
      },
      submiting: false,
      visible: false,
      rules: {
        newPassword: [{ validator: validNewPass, trigger: "blur" }],
        againPassword: [{ validator: validAgainPass, trigger: "blur" }]
      }
    };
  },
  methods: {
    onSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.submiting) return;
          this.submiting = true;
          resetPwd({
            userId: this.userId,
            // newPassword: this.form.newPassword
            newPassword: md5(this.form.newPassword)
          })
            .then(res => {
              this.submiting = false;
              this.visible = false;
              this.close();
              this.$message.success("密码重置成功");
            })
            .catch(err => {
              this.submiting = false;
            });
        } else {
          console.log("validate error");
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>
